<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
       *{
           padding:0;
           margin: 0;
           /* overflow: hidden; */
       }
       li{
           list-style: none;
           
       }
       a{
           text-decoration: none;
       }
        #bd_bg>img{
            width: 100%;
            height: 100%;

        }
        #bd_bg>img:nth-child(2){
            margin-top: -10px;
        }
        
        #bd_header{
            position: relative;
            width: 100%;
            height: 500px;
            overflow: hidden;
            filter: none;
        }
        #bd_header>ul{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            width: 1400px;
            overflow: hidden;
            height: 500px;
        }
        .header_cover{
            position: absolute;
            width: 100%;
            height: 500px;
            background: url("./yuba_img/bd_bg1.jpg");
            background-size:100% 100%;
            filter: blur(15px);
        }
        #bd_header>ul>li{
            float: left;
            width: 1400px;
            height: 500px;
        }
        #bd_header>ul>li>img{
            width: 100%;
            height: 100%;
        }
        

    </style>
    <link rel="stylesheet" href="./css/bangdan.css">
</head>
<body>
    
    <!-- <div id="bd_bg">
        <img src="./yuba_img/bdbg1.png" alt="">
        <img src="./yuba_img/bdbg2.png" alt="">
    </div> -->
    
    <!-- <div id="bd_header">
        <div class="header_cover"></div>
        <ul>
            <li>
                <img src="./yuba_img/bd_bg1.jpg" alt="">
            </li>
            <li>
                <img src="./yuba_img/bd_bg2.jpg" alt="">
            </li>
            <li>
                <img src="./yuba_img/bd_bg3.jpg" alt="">
            </li>
           
        </ul>
    
    </div> -->
    <!-- 轮播图 -->
    <div id="banner"> 
   
        <ul>
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        </ul>
        <div id="banner_list">
        <a href="#" target="_blank"><img class="lbimg" src="./yuba_img/bd_bg5.jpg"  /></a>
        <a href="#" target="_blank"><img class="lbimg" src="./yuba_img/bd_bg6.png"  /></a>
        <a href="#" target="_blank"><img class="lbimg" src="./yuba_img/bd_bg7.png"  /></a>
        <a href="#" target="_blank"><img class="lbimg" src="./yuba_img/bd_bg8.png"  /></a>
        </div>
        </div>
    <div class="main">
        <div class="main_title">
            <h2>主播吧排行榜</h2>
            <h2>游戏吧排行榜</h2>
        </div>
        <div class="bangdan_img">
            <div class="bangdan_img_center">
                
                <img class="one_img" src="./yuba_img/one3.jpg" alt="">
                <img class="two_img" src="./yuba_img/two3.jpg" alt="">
                <img class="three_img" src="./yuba_img/three3.jpg" alt="">

                <div class="one">
                </div>
                <div class="two"></div>
                <div class="three"></div>
                <img class="sidai1" src="./yuba_img/one2.png" alt="">
                <img class="sidai2" src="./yuba_img/two2.png" alt="">
                <img class="sidai3" src="./yuba_img/three2.png" alt="">
                <!-- 文字 -->
                <a href="" class="bda1">银子</a>
                <a href="" class="bda2">一条小团团</a>
                <a href="" class="bda3">仙某人</a>
            </div>
        </div>
        <div class="bangdan_other">
            <div class="new_bang">
                <div class="reb_title">
                    <img src="./yuba_img/guanjun.png" alt=""><a href="">最新榜单</a>
                </div>
                <ul id="new_bang">
                </ul>
                <div class="new_more">
                    <div id="more_btn1">点击加载更多</div>
                    <img src="./yuba_img/xiangxia.png" alt="">
                </div>
            </div>
            <ul id="other_ul2">
                <li></li>
            </ul>
            <div class="rebang">
                <div class="reb_title">
                    <img src="./yuba_img/hot.png" alt=""><a href="">热榜</a>
                </div>
                <ul id="rebang">
                    
                </ul>
                <div class="new_more">
                    <div id="more_btn2">点击加载更多</div>
                    <img src="./yuba_img/xiangxia.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <script src="./lib/jquery-2.0.0.min.js"></script>
    <script>
        window.onload=function(){
           var obj=$.ajax({
               type:"get",
               url:"./js/yb_bd.json",
               async:false,
               success:function(response,status,xhr){
                   console.log(response);
               },
               error:function(){
                   console.log("错啦");
               }
           })
           function Product(obj){
               this.src=obj.src;
               this.redu=obj.redu;
               this.content=obj.content;
           }
           function Product2(obj){
                // this.src=obj.src;
                this.paiming=obj.paiming;
                this.bisai=obj.bisai;
                this.shijian=obj.shijian;
                this.jieshuo=obj.jieshuo;
                this.img=obj.img;
                this.biaoqian1=obj.biaoqian1;
                this.biaoqian2=obj.biaoqian2;
                this.biaoqian3=obj.biaoqian3;

           }
          
            Product.prototype={
               init:function(){
                   //   //前置追加
                   var new_li=$("<li></li>");
                   $("<li></li>").html('<a href="" class="new">New</a><img src="'+this.src+'" alt=""><span>'+this.redu+'</span><div class="other_li_cover"><p>'+this.content+'</p><button>关注</button></div>').appendTo($("#new_bang"));
               }

            }
            Product2.prototype={
               init:function(){
                   //   //前置追加
                   var new_li=$("<li></li>");
                   $("<li></li>").html('<div class="rb_item1"><span>'+this.paiming+'</span><span>#'+this.bisai+'#</span><a href="">'+this.shijian+'</a></div><div class="rb_item2"><div>'+this.jieshuo+'</div><img src="'+this.img+'" alt=""></div><div class="rb_item3"><a href="">'+this.biaoqian1+'</a><a href="">'+this.biaoqian2+'万阅读</a><a href="">'+this.biaoqian3+'讨论</a></div>').appendTo($("#rebang"));
               }

            }
           
           $.each(obj.responseJSON.data,function(i,e){
               var pro =new Product(e);
               pro.init();
           })
           $.each(obj.responseJSON.reBang,function(i,e){
               var reb =new Product2(e);
               reb.init();
           })
       }
   </script>
    <script src="./js/bangdan.js"></script>

</body>
</html>